<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div1" class="box" title="one">class为box的div1</div>
  <div id="div2" class="box" title="two">class为box的div2</div>
  <div id="div3" data-id="1001">div3</div>
  <span class="box">class为box的span</span>
  <br>
  <ul>
    <li>AAAAA</li>
    <li title="hello" class="box2">BBBBB</li>
    <li class="box">CCCCC</li>
    <li title="hello">DDDDD</li>
    <li title="two"><span>BBBBB</span></li>
  </ul>

  <input type="text" name="username" value="briupClass">
  <br>
  <input type="checkbox">
  <input type="checkbox">
  <input id="input3" type="checkbox">我是禁用的
  <br>
  <button>选中</button>
  <button>不选中</button>
  <!-- 
    1.操作任意属性
      attr()
      removeAttr()
      prop()
      removeProp() 很少使用
    2.操作class属性
      addClass()
      removeClass()
    3.操作HTML代码/文本/值 
      html()
      val()
   -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function () {
      // 1.读取第一个div的title属性
      // console.log($('div:first').attr('title'));

      // 2.给所有的div设置name属性（value为briup）
      // $('div').attr('name', 'briup')

      // 3.移除所有div的title属性
      // $('div').removeAttr('title')

      // 4.使用prop给input3添加disabled属性
      // $('#input3').prop('disabled', true)

      // 5.使用removeProp移除disabled属性
      // $('#input3').removeProp('disabled')

      // 6.给所有div设置class='briupClass'
      // $('div').attr('class', 'briupClass')

      // 7.给所有div添加class='abc'
      // $('div').addClass('abc')

      // 8.移除所有class为briupClass的div
      // $('div').removeClass('briupClass')

      // 9.得到最后一个li的标签体文本
      // console.log($('li:last').html());

      // 10.设置第一个li的标签体为"<h1>mmmmmmm</h1>"
      // $('li:first').html("<h1>mmmmmmm</h1>")

      // 11.得到输入框中的value值
      // console.log($(':text').val());

      // 12.将输入框的值设置为briup
      $(':text').val('briup')

      // 13.点击‘全选’按钮实现全选
      // attr() 操作属性值为非布尔值的属性
      // prop() 专门操作属性值为布尔值的属性
      var $checkboxs = $(':checkbox')
      $('button:first').click(function () {
        $checkboxs.prop('checked', true)
      })

      // 14.点击全不选按钮实现全不选
      var $checkboxs = $(':checkbox')
      $('button:last').click(function () {
        $checkboxs.prop('checked', false)
      })
    })
    
  </script>
</body>
</html>